<template>
  <!-- 新闻卡片容器 -->
  <view class="news-card">
    <!-- 新闻标题 -->
    <text class="title">{{ news.title }}</text>
    
    <!-- 元信息栏（置顶标签、作者、评论数、时间） -->
    <view class="meta-bar">
      <!-- 置顶标签（仅当isTop为true时显示） -->
      <text class="top-tag" v-if="news.isTop">置顶</text>
      
      <!-- 作者 -->
      <text class="author">{{ news.author }}</text>
      
      <!-- 评论数 -->
      <text class="comments">{{ news.comments }}评</text>
      
      <!-- 发布时间（靠右显示） -->
      <text class="time">{{ news.time }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "TopNewsCard",
  // 接收父组件传递的新闻数据（必传，类型为对象）
  props: {
    news: {
      type: Object,
      required: true,
      // 验证新闻对象的结构（可选，增强健壮性）
      validator: (value) => {
        return (
          "title" in value &&
          "isTop" in value &&
          "author" in value &&
          "comments" in value &&
          "time" in value
        );
      }
    }
  }
};
</script>

<style scoped>
/* 卡片容器样式 */
.news-card {
  padding: 20rpx 15rpx; /* 上下内边距20rpx，左右15rpx */
  border-bottom: 1rpx solid #f5f5f5; /* 底部分隔线 */
  background-color: #fff; /* 白色背景 */
}

/* 标题样式 */
.title {
  font-size: 34rpx; /* 字体大小 */
  font-weight: 500; /* 中等加粗 */
  color: #333; /* 深灰色文字 */
  line-height: 1.4; /* 行高 */
  display: block; /* 块级元素，独占一行 */
  margin-bottom: 15rpx; /* 与下方元信息的间距 */
}

/* 元信息栏样式（使用flex布局横向排列） */
.meta-bar {
  display: flex;
  align-items: center; /* 垂直居中 */
  font-size: 26rpx; /* 小字体 */
  color: #666; /* 灰色文字 */
}

/* 置顶标签样式 */
.top-tag {
  color: #ff4d4f; /* 红色文字 */
  margin-right: 15rpx; /* 与作者的间距 */
  padding: 0 5rpx;
  border: 1rpx solid #ff4d4f; /* 红色边框 */
  border-radius: 4rpx; /* 圆角 */
}

/* 作者、评论数字样（增加间距） */
.author {
  margin-right: 20rpx;
}
.comments {
  margin-right: 20rpx;
}

/* 时间样式（自动靠右） */
.time {
  margin-left: auto; /* 左边自动填充空间，实现靠右 */
  color: #999; /* 更浅的灰色 */
}
</style>